CSS Animation Using Animate.css

Instructions for HOME page only

If you have multiple page with the same classes assigned to them, all of these pages will animated. To prevent this, you can add or remove class for a given page.

Resource: Animate.css file.

1. Save the first file as a new file (e.g., OnlyOnHomePage.html).
2. Open the page and right-click in FireFox and select Inspect Element(Q) from the menu.
3. Select the Console button and type in the following: console.log(location) and press the ENTER key to see what the href is for that page and copy it.
4. Remove the two classes from the page element (e.g., <h1 class ="animated rubberband">Heading</h1> that were added in the previous page.
5. Write the following jQuery code inside a set of script element in the head element:
   
   

   $(document).ready(function(){
   if(location.href = "http://www.websitename.com/" || location.href = "http://website.com/")
   {
      $("#myHeading".addClass("animated tada");
   } 
   });

   NOTE: Replace websitename.com with a real URL.